<template>
  <div>
    <div class="header-btn">
      <div>{{ id ? '编辑问卷' : '创建问卷' }}</div>
      <div>
        <el-button type="primary" @click="submitForm" :loading="submitLoading">确认</el-button>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <el-form label-width="120px" class="demo-ruleForm" :model="form" :rules="rules" ref="form1">
      <div class="wrap g-card" style="margin-bottom: 20px">
        <div style="width: 60%;">
          <div class="title-header">问卷基础信息</div>
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="个人分组" prop="groupId" v-if="(levelType == 1)">
            <el-select v-model="form.groupId" placeholder="请选择分组" style="width: 100%;">
              <el-option :label="item.name" :value="item.id" v-for="item in personList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业分组" prop="groupId" v-if="(levelType == 0)">
            <el-select v-model="form.groupId" placeholder="请选择分组" style="width: 100%;">
              <el-option :label="item.name" :value="item.id" v-for="item in companyList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="说明" prop="description">
            <el-input type="textarea" placeholder="请输入" v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item label="字段" prop="flag">
            <el-table v-loading="loading" :data="newFiledList" :header-cell-style="headerCellStyle"
                      :row-style="rowStyle" :cell-style="cellStyle"
            >
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column label="字段标题" prop="title"></el-table-column>
              <el-table-column label="类型" prop="mode"></el-table-column>
              <el-table-column label="必填" prop="isFill">
                <template slot-scope="scope">
                  {{ scope.row.isFill ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope)" type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small" @click="handleDelClick(scope)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button @click="(addFieldDialog = true)">+ 新建字段</el-button>
          </el-form-item>
        </div>
      </div>
      <div class="wrap g-card" style="margin-bottom: 20px">
        <div style="width: 60%;">
          <div class="title-header">问卷高级功能</div>
          <el-form-item label="问卷有效期" prop="isLongEffective">
            <el-radio-group v-model="form.isLongEffective" @change="changeLongEffective">
              <el-radio label="1">永久有效</el-radio>
              <el-radio label="0">自定义时间</el-radio>
            </el-radio-group>
            <el-date-picker v-if="form.isLongEffective == 0" v-model="effectiveDate" type="daterange"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions"
                            style="margin-left: 10px"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="使用成员" prop="userdFlag">
            <el-button class="button-new-tag" size="small" @click="handleClick1">
              <svg-icon icon-class="add"/>
              添加员工
            </el-button>
            <div v-if="scrmPersonSopUserRels1.length > 0" style="">
              <el-tag v-for="item in scrmPersonSopUserRels1" :key="item.userId" closable @close="handleClose1(item)">
                {{ item.userName }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="提交页面后设置" prop="switchUrl">
            <el-switch v-model="isJumpSwitch"></el-switch>
            <template v-if="isJumpSwitch">
              <div>
                <el-radio-group v-model="form.isJump">
                  <el-radio label="0">跳转链接</el-radio>
                  <el-radio label="1">跳转二维码</el-radio>
                </el-radio-group>
              </div>
              <div v-if="(+form.isJump === 0)">
                <el-form-item prop="switchUrlOne">
                  <el-input placeholder="请输入链接" v-model="form.switchUrlOne"></el-input>
                </el-form-item>
              </div>
              <div v-if="(+form.isJump === 1)">
                <formUpload @sendPhotoUrl="geturl"/>
              </div>
            </template>
          </el-form-item>
          <el-form-item prop="ZNnotice">
            <template slot="label">
              智能跟进
              <el-tooltip class="item" content="当客户提交问卷时，会将客户的行为记录在客户轨迹里" effect="light" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </template>
            <div>
              <el-checkbox label="行为通知" v-model="form.isShortmsgNotice"></el-checkbox>
              <span class="notice">当客户点击或提交问卷时，员工将会收到消息提醒</span>
            </div>
            <div>
              <el-checkbox label="客户标签" v-model="form.isLabelNotice"></el-checkbox>
              <span class="notice">开启后，将会根据规则条件，如符合条件，该客户自动打上对应标签</span>
            </div>
            <div v-if="form.isLabelNotice" style="border: 1px solid #dfe4ed;border-radius: 8px">
                <el-form-item label="标签规则">
                  <el-radio-group v-model="form.weGroupTagVOSRule">
                    <el-radio label="0">进入问卷</el-radio>
                    <el-radio label="1">提交问卷</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="添加标签" required>
                  <tag-group v-model="form.weGroupTagVOS" @change="groupChange"/>
                </el-form-item>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="wrap g-card" style="margin-bottom: 20px">
        <div class="title-header">封面和摘要</div>
        <el-form-item label="封面" prop="photoUrlFlag">
          <formUpload @sendPhotoUrl="getPhotoUrl"/>
          <p style="font-size: 12px; color: #999">建议上传800*800像素的图片</p>
        </el-form-item>
        <el-form-item label="摘要" prop="text" style="width: 60%;">
          <el-input type="textarea" placeholder="选填，页面描述会在微信转发中显示，帮助客户快速了解内容" v-model="form.text"></el-input>
        </el-form-item>
      </div>
      <div class="wrap g-card" style="margin-bottom: 20px" v-if="this.$route.query.is_person == 1">
        <div class="title-header">其他设置</div>
        <el-form-item label="其他设置" prop="isSync">
          <el-checkbox v-model="form.isSync">同步到企业库</el-checkbox>
        </el-form-item>
      </div>
    </el-form>
    <!-- 新增字段 -->
    <el-dialog title="新增字段" :visible.sync="addFieldDialog" width="40%">
      <div class="addField">
        <div class="addField-radio">
          <p>字段类型</p>
          <el-radio-group v-model="newFiledForm.mode">
            <el-radio label="单选框"></el-radio>
            <el-radio label="多选框"></el-radio>
            <el-radio label="下拉框"></el-radio>
            <el-radio label="单行填空"></el-radio>
            <el-radio label="多行填空"></el-radio>
          </el-radio-group>
          <p>常用内容</p>
          <el-radio-group v-model="newFiledForm.title" class="cyContent" @change="changeCodeName">
            <el-radio label="姓名"></el-radio>
            <el-radio label="微信号"></el-radio>
            <el-radio label="手机号"></el-radio>
            <el-radio label="性别"></el-radio>
            <el-radio label="地址"></el-radio>
            <el-radio label="备注"></el-radio>
          </el-radio-group>
        </div>
        <div class="addField-input">
          <p class="title">单项填空</p>
          <p class="iptTitle"><span></span>标题</p>
          <el-input v-model="newFiledForm.title" placeholder="请输入标题" maxlength="32" show-word-limit></el-input>
          <template v-if="newFiledForm.mode != '单选框' && newFiledForm.mode != '多选框'">
            <p class="iptTitle"><span></span>默认文案设置</p>
            <el-input v-model="newFiledForm.remark" placeholder="请输入" maxlength="32" show-word-limit></el-input>
          </template>
          <template v-if="newFiledForm.mode != '单行填空' && newFiledForm.mode != '多行填空'">
            <p class="iptTitle"><span></span>选项内容</p>
            <div v-for="(item, index) in newFiledForm.inputList" :key="index" class="iptList">
              <el-input v-model="item.value" placeholder="请输入选项" maxlength="32" show-word-limit></el-input>
              <el-button class="buttonStyle" size="mini" icon="el-icon-minus" circle @click="delIptList(index)"
              ></el-button>
            </div>
            <div>
              <el-button style="margin-right: 5px;margin-top: 0px;vertical-align: middle;" class="buttonStyle"
                         icon="el-icon-plus" circle size="mini" @click="addIptList"
              ></el-button>
              <span style="vertical-align: middle;">添加选项</span>
            </div>
          </template>
          <p class="iptTitle"><span></span>高级设置</p>
          <div>是否必填
            <el-switch v-model="newFiledForm.isFill" active-color="#13ce66" inactive-color="#ccc"></el-switch>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNewField">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="删除确认" :visible.sync="delFieldDialog" width="40%">
      <p>确认删除该字段？</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="delNewField">确 定</el-button>
      </div>
    </el-dialog>
    <SelectUser :selectList="tableDataName1" :visible.sync="selectUserVisible1" :userList="[]" @confirm="selectUserConfirm1" :is-active="'1'"></SelectUser>
  </div>
</template>

<script>
import { linkValidate } from '@/utils/validate'
import Upload from '@/components/UploadAvatars/UploadSingle.vue'
import formUpload from './formUpload.vue'
import { addTableManage, categoryList, formMsgQuery, getPermission, getTreeSelect } from '@/api/article/group'
import SelectCus from '@/views/customerOperations/attractCustomers/component/selectCus.vue'
import SelectUser from "@/components/SelectUser/index.vue";
import MakeLabel from "@/components/MakeLabel/index.vue";

export default {
  components: {SelectUser, Upload, formUpload, SelectCus , MakeLabel },
  data() {
    return {
      levelType: this.$route.query.levelType,
      id: this.$route.query.id,
      personList: [],//个人分组
      companyList: [],//企业分组
      submitLoading: false,
      form: {
        title: null,
        description: null,
        scrmTableCreateSetVoList: [],
        isLongEffective: null,
        isJump: null,
        isShortmsgNotice: null,
        isActivityNotice: null,
        isLabelNotice: null,
        labelRule: null,
        text: null,
        isSync: null,
        photoUrl: null,
        fileName: null,
        companyGroupId: null,//企业分组
        groupId: null,//个人分组
        flag: null,
        userdFlag: '',
        photoUrlFlag: '',
        switchUrl: null,//输入链接
        switchUrlOne: null,//输入链接
        switchUrlToo: null//上传的链接
      },
      effectiveDate: [],//有效期时间区间
      isJumpSwitch: false,//提交后页面设置开关
      tabVal: null,//标签规则开启
      addTagVisible: false,//添加标签
      addTagValue: null,
      addCustomer: false,//添加员工
      treeData: null,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      searchCustomer: null,
      deptId: null,
      checkboxGroup: [],
      customerNames: [],
      tableList: [],
      loading: false,
      addFieldDialog: false,//新建字段
      newFiledForm: {
        mode: null,//字段单选
        title: null,//常用内容
        remark: null,//默认文案设置
        isFill: false,//是否必填
        inputList: [
          { value: null },
          { value: null },
          { value: null }
        ]//选项框
      },
      valueTypeList: [
        { dictValue: '0', dictLabel: '单选框' },
        { dictValue: '1', dictLabel: '多选框' },
        { dictValue: '2', dictLabel: '下拉框' },
        { dictValue: '3', dictLabel: '单行填空' },
        { dictValue: '4', dictLabel: '多行填空' }
      ],
      newFiledList: [],//
      delFieldDialog: false,
      delFiledId: null,//删除的id
      labelList: [],//添加的标签
      headerCellStyle: {
        background: '#F8F8F8',
        color: '#1D1D1D',
        height: '40px',
        textAlign: 'center',
        borderLeft: 'none',
        borderRight: 'none'
      },
      rowStyle: {
        height: '40px',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap'
      },
      cellStyle: {
        height: '40px',
        padding: '0',
        textAlign: 'center',
        borderLeft: 'none',
        borderRight: 'none',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap'
      },
      pickerOptions: {
        disabledDate(time) {
          // return time.getTime() > Date.now();;
        }
      },
      rules: {
        groupId: [
          { required: true, message: '请选择个人分组', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { max: 32, message: '您的录入字数不能超过32个字符', trigger: 'blur' }
        ],
        description: [
          { max: 200, message: '您的录入字数不能超过200个字符', trigger: 'blur' }
        ],
        flag: [
          { required: true, message: '请新建字段' }
        ],
        isLongEffective: [
          { required: true, message: '请选择问卷有效期', trigger: 'change' }
        ],
        userdFlag: [
          { required: true, message: '请添加使用成员' }
        ],
        switchUrl: [
          // { required: true, message: '请选择跳转方式', trigger: 'blur' },
          // { validator: linkValidate("跳转", 200), trigger: 'blur' }
        ],
        switchUrlOne: [
          // { required: true, message: '请输入跳转链接', trigger: 'blur' },
          { validator: linkValidate('跳转', 200), trigger: 'blur' }
        ],
        photoUrlFlag: [
          { required: true, message: '请上传封面图片' }
        ],
        text: [
          { max: 200, message: '您的录入字数不能超过200个字', trigger: 'blur' }
        ]
      },
      scrmPersonSopUserRels1: [],
      tableDataName1: [],
      selectUserVisible1: false
    }
  },
  watch: {
    newFiledList() {
      this.form.flag = this.newFiledList.length == 0 ? '' : true
    },
    scrmPersonSopUserRels1() {
      this.form.userdFlag = this.scrmPersonSopUserRels1.length == 0 ? '' : true
    },
    'form.photoUrl': {
      handler() {
        this.form.photoUrlFlag = this.form.photoUrl ? '1' : ''
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getTree()
      const params = {
        name: '',
        deptId: null,
        authFlag: 'Y'
      }
      this.getPermission(params)
      this.categoryList()
     this.id && this.getInfo()
    },
    goBack() {
      this.$router.push({
        name: 'FormManage', query: { is_person: this.$route.query.is_person }
      })
    },
    categoryList() {
      const params = {
        levelType: 1,
        mediaType: 10
      }
      categoryList(params).then((res) => {
        // 个人分组
        if (res.code == 200) {
          this.personList = res.data || []
        }
      }).catch(() => {
        console.log('error')
      })
      const data = {
        levelType: 0,
        mediaType: 10
      }
      categoryList(data).then((res) => {
        // 企业分组
        if (res.code == 200) {
          this.companyList = res.data || []
        }
      }).catch(() => {
        console.log('error')
      })
    },
    handleTabsEdit() {
    },
    getTree() {
      getTreeSelect().then((res) => {
        if (res.code === 200) {
          this.treeData = res.data
        }
      }).catch(() => {
        console.log('error')
      })
    },
    getPermission(params) {
      getPermission(params).then((res) => {
        if (res.code === 200) {
          this.customerNames = res.data
        }
      }).catch(() => {
        console.log('error')
      })
    },
    handleNodeClick(data) {
      // 点击组织机构
      this.deptId = data.value
      console.log(111)
      this.searchCus()
    },
    // handleClose(tag) {
    //   this.checkboxGroup.splice(this.checkboxGroup.indexOf(tag), 1)
    // },
    searchCus() {
      // 搜索员工
      const params = {
        name: this.searchCustomer,
        deptId: this.deptId,
        authFlag: 'Y'
      }
      this.getPermission(params)
    },
    changeCodeName() {
      if (this.newFiledForm.title == '姓名' || this.newFiledForm.title == '微信号'
        || this.newFiledForm.title == '手机号' || this.newFiledForm.title == '地址') {
        this.newFiledForm.mode = '单行填空'
      } else if (this.newFiledForm.title == '性别') {
        this.newFiledForm.mode = '单选框'
        this.newFiledForm.inputList = [{ value: '男' }, { value: '女' }]
      } else if (this.newFiledForm.title == '备注') {
        this.newFiledForm.mode = '多行填空'
      }
    },
    addIptList() {
      // 添加输入框
      this.newFiledForm.inputList.push({ value: null })
    },
    delIptList(index) {
      this.newFiledForm.inputList.splice(index, 1)
    },
    addNewField() {
      //确定
      if (!this.newFiledForm.id && this.newFiledForm.id !== 0) {
        this.newFiledList.push(this.newFiledForm)
      } else {
        this.newFiledList.splice(this.newFiledForm.id, 1, this.newFiledForm)
      }
      this.newFiledForm = {
        id: null,
        mode: null,//字段单选
        title: null,//常用内容
        isFill: false,//是否必填
        inputList: [
          { value: null },
          { value: null },
          { value: null }
        ]//选项框
      }
      this.addFieldDialog = false
    },
    handleClick(value) {
      //字段编辑
      console.log(value.$index)
      this.addFieldDialog = true
      this.newFiledForm = value.row
      this.newFiledForm.id = value.$index
    },
    handleDelClick(value) {
      //字段删除
      this.delFieldDialog = true
      this.delFiledId = value.$index
    },
    delNewField() {
      // 删除确认
      this.delFieldDialog = false
      this.newFiledList.splice(this.delFiledId, 1)
    },
    geturl(value) {
      this.form.switchUrlToo = value
    },
    getPhotoUrl(value) {
      // 获取上传图片的url
      // this.form.fileName = value.fileName;
      this.form.photoUrl = value
    },
    groupChange(value) {
      if(value.length == 0) this.$message.error('请填写标签组')
    },
    addLabelList(value) {
      //添加标签
      if (value) {
        this.labelList = value?.split(/[；;]/g)
        if (value.trim().endsWith("；")) {
          this.labelList.pop();
        }
        // this.labelList.push(str);
        this.addTagValue = value;
        // this.addTagVisible = false

      } else {
        this.$message.error('请填写标签')
      }
    },
    labelClose(value) {
      this.labelList.splice(this.labelList.indexOf(value), 1)
    },
    submitForm() {
      console.log('form.weGroupTagVOS', this.form.weGroupTagVOS);
      // 创建问卷
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          console.log('创建')
          if (this.newFiledList.length == 0) {
            this.$message.error('请新建字段')
            return
          }
          this.submitLoading = true
          const selFiled = []
          this.newFiledList.forEach(item => {
            let obj = {
              optionList: []
            }
            if (item.mode == '单选框') {
              obj.mode = 0
              obj.title = item.title
              obj.isFill = +item.isFill
              item.inputList.forEach((ele) => {
                if (ele.value) {
                  obj.optionList.push({ name: ele.value })
                }
              })
            } else if (item.mode == '多选框') {
              obj.mode = 1
              obj.title = item.title
              obj.isFill = +item.isFill
              item.inputList.forEach((ele) => {
                if (ele.value) {
                  obj.optionList.push({ name: ele.value })
                }
              })
            } else if (item.mode == '下拉框') {
              obj.mode = 2
              obj.title = item.title
              obj.isFill = +item.isFill
              obj.remark = item.remark
              item.inputList.forEach((ele) => {
                if (ele.value) {
                  obj.optionList.push({ name: ele.value })
                }
              })
            } else if (item.mode == '单行填空') {
              obj.mode = 3
              obj.title = item.title
              obj.isFill = +item.isFill
              obj.remark = item.remark
            } else if (item.mode == '多行填空') {
              obj.mode = 4
              obj.title = item.title
              obj.isFill = +item.isFill
              obj.remark = item.remark
            }
            selFiled.push(obj)
          })
          const users = []
          this.scrmPersonSopUserRels1.forEach(item => {
            users.push(item.userId)
          })
          console.log(this.addTagValue , 'addTagValue' , '@@@@@@')
          const params = {
            scrmTableDetailAddVo: {
              levelType: this.levelType,
              ...this.form,
              startDate: this.effectiveDate[0],
              endDate: this.effectiveDate[1],
              isJump: this.form.isJump,
              switchUrl: +this.form.isJump === 0 ? this.form.switchUrlOne : this.form.switchUrlToo,
              isShortmsgNotice: +this.form.isShortmsgNotice,
              isActivityNotice: +this.form.isActivityNotice,
              isLabelNotice: +this.form.isLabelNotice,
              // label: this.labelList.join(";"),this.addTagValue
              // label: this.addTagValue,
              // label: this.form.weGroupTagVOS,
              isSync: +this.form.isSync,
              userdMember: users.join(';')
            },
            scrmTableCreateSetVoList: selFiled
          }
          addTableManage(params).then((res) => {
            if (res.code == 200) {
              this.submitLoading = false
              this.$message.success('添加成功')
              this.$router.push({
                name: 'FormManage', query: { is_person: this.$route.query.is_person }
              })
            } else {
              this.submitLoading = false
              this.$message.error(res.data)
            }
          }).catch(() => {
            this.submitLoading = false
            console.log('error')
          })
        } else {
          console.log('error submit!!')
          this.$message.error('您还未录入完成，请核对后提交!')
          return false
        }
      })
    },
    changeLongEffective() {
      // 时间变化
      this.form.isLongEffective == 1 ? this.effectiveDate = [] : ''
    },
    // 编辑
    getInfo() {
      const params = {
        id: this.id
      }
      formMsgQuery(params).then((res) => {
        console.log(res)
        if (res.code == 200) {

        if(res.data.scrmTableDetail.weGroupTagVOS){
          res.data.scrmTableDetail.weGroupTagVOS1 = JSON.parse(JSON.stringify(res.data.scrmTableDetail.weGroupTagVOS))
          res.data.scrmTableDetail.weGroupTagVOS = []
          res.data.scrmTableDetail.weGroupTagVOS1.forEach(tagGroup=>{
            tagGroup.tagName.split(',').forEach(tagName=>{
              res.data.scrmTableDetail.weGroupTagVOS.push({groupName:tagGroup.groupName,tagName})
            })
          })
        }

          this.groupName = res.data.groupName
          this.companyGroupName = res.data.companyGroupName
          this.isSync = res.data.isSync
          this.form = res.data.scrmTableDetail || {}
          this.tableData = res.data.scrmTableQuestionAndOptionList || []
          // this.form['userNameList'] = this.form.userdMember.split(';')
          this.scrmPersonSopUserRels1 = this.form.userdMember.split(';')
          this.form.isLongEffective = this.form.isLongEffective + ''
          this.form.isJump = this.form.isJump + ''
          this.form.isShortmsgNotice = this.form.isShortmsgNotice == '1' ? true : false
          this.form.isActivityNotice = this.form.isActivityNotice == '1' ? true : false
          this.form.isLabelNotice = this.form.isLabelNotice == '1' ? true : false
          this.form['isSync'] = res.data.isSync == '1' ? true : false
          // this.form.weGroupTagVOSList = this.form.weGroupTagVOS?.split(/[；;]/g)
          this.addTagValue = this.form.weGroupTagVOS;
          if (this.form.isJump === '0') {
            this.switchUrlOne = this.form.switchUrl
          } else {
            this.switchUrlToo = this.form.switchUrl
          }
          let tmpArr = []
          tmpArr.push(new Date(this.form.startDate))
          tmpArr.push(new Date(this.form.endDate))
          this.effectiveDate = tmpArr
          this.tableData.forEach(item => {
            item.mode = this.selectDictLabel(this.modeList, item.mode)
          })
        }
      }).catch(() => {
        console.log('error')
      })
    },

    //添加员工
    handleClick1() {
      // let arr = []
      // if (this.scrmPersonSopUserRels1) this.scrmPersonSopUserRels1.forEach(item => arr.push(item.userName))
      this.tableDataName1 = this.scrmPersonSopUserRels1 || []
      this.selectUserVisible1 = true
    },
    //删除员工
    handleClose1(item) {
      this.scrmPersonSopUserRels1 = this.scrmPersonSopUserRels1.filter((x) => {
        return x.userId != item.userId
      })
    },
    //选中的员工数据
    selectUserConfirm1(value) {
      // if (value && value.length > 1) {
      //   this.$message.error('只支持选中一个员工')
      //   this.selectUserVisible1 = true
      // } else {
      if(value){
        this.scrmPersonSopUserRels1 = []
        value.forEach((item) => {
          this.scrmPersonSopUserRels1.push({
            ...item
          })
        })
      }
      }
    // }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.notice {
  font-size: 12px;
  color: #999;
  margin-left: 20px;
}

.demo-ruleForm {
  width: 100%;
}

.addCustomerDialog {
  display: flex;
  height: 300px;

  .el-divider {
    height: 100%;
    width: 1px;
  }

  .selectCus {
    flex: 1;

    .el-tag {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 5px 5px;
    }
  }

  .el-tree {
    width: 33%;
  }

  .searchCus {
    width: 33%;
    height: 100%;
    overflow-y: scroll;

    .el-checkbox {
      width: 100%;
      padding: 2px 2px;
    }
  }
}

.addField {
  display: flex;

  .addField-radio {
    flex: 1;

    p {
      font-size: 18px;
    }

    .el-radio {
      margin: 10px 10px;
    }
  }

  .addField-input {
    flex: 1;
    border-left: 1px solid #ccc;
    padding: 5px 5px;

    .title {
      font-size: 18px;
      padding: 5px 5px;
      border-bottom: 1px solid #ccc;
    }

    .iptTitle {
      display: flex;
      padding: 15px 5px;
      font-size: 15px;

      span {
        border: 1px solid #082aff;
        margin-right: 10px;
      }
    }

    .iptList {
      display: flex;
      margin: 5px 5px;

      .el-button {
        margin-left: 10px;
      }
    }
  }
}

.tagDesc {
  color: #082aff;
  text-align: right;
}

.buttonStyle {
  margin-top: 5px;
  position: relative;
  width: 20px;
  height: 20px;

  ::v-deep i {
    // color: #999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
